<template>
	<view class="goodsDetails" :style="{position:noScroll?'fixed':'static'}">
		<image src="../../../static/logo.png" class="goodsImg"></image>
		<view class="price">
			<view class="originalCost">
				<view class="box t">商品原价</view>
				<view class="box del">￥12.99</view>
			</view>
			<view class="preferentialPrice">
				<text>特惠价 ￥<strong>9.99</strong></text>
			</view>
		</view>
		<view class="goodsNum">
			<text>商品数量</text>
			<view class="numBox">
				<view class="minus">-</view>
				<view class="show">{{goodsNum}}</view>
				<view class="add">+</view>
			</view>
		</view>
		<view class="goodsInfo">
			<view class="title">
				<text>自带4线便携充电宝37W快充带电量显示10000MA</text>
			</view>
			<view class="desc">
				<text>谎健康的哈手机卡</text><br />
				<text>萨的课件撒撒谎健康的哈手机卡</text><br />
				<text>萨的课件撒后即可谎健康的哈手机卡</text><br />
				<text>萨的课件撒哈手机卡</text><br />
				<text>萨的课件的哈手机卡</text><br />
				<text>萨的课件谎健康的哈手机卡</text><br />
			</view>
		</view>
		<view class="btnArea">
			<image src="../../../static/svg/CS.svg" class="icon"></image>
			<view class="btn" @click="showDialog">立即购买</view>
		</view>


		<!-- ========================================================================================= -->

		<view class="dialog" v-if="dialog">
			<view class="d_main">
				<view class="title">
					请输入您的收货信息
				</view>
				<view class="content">
					<div class="inputBox">
						<view class="f_name">收货人:</view>
						<input type="text" placeholder="请输入用户ID" v-model="sendByPostInfo.name" />
					</div>
					<div class="inputBox">
						<view class="f_name">手机号:</view>
						<input type="text" placeholder="请输入用户ID" v-model="sendByPostInfo.phone" />
					</div>
					<div class="inputBox ta">
						<view class="f_name">收货地址:</view>
						<textarea class="textArea" placeholder="请输入用户ID" v-model="sendByPostInfo.address" />
					</div>
				</view>
				<view class="btnBox">
					<view class="btn" @click="cancel">取消</view>
					<view class="btn bgc" @click="determine">立即支付</view>
				</view>
			</view>
		</view>


	</view>
</template>

<script>
	export default {
		data() {
			return {
				dialog: false,
				id: null,
				sendByPostInfo: {
					name: null,
					phone: null,
					address: null
				},
				goodsNum: 1,
				noScroll:false
			}
		},
		methods: {
			showDialog() {
				this.noScroll=true
				this.dialog = true
			},
			cancel() {
				this.noScroll=false
				this.dialog = false
			},
			determine() {
				this.noScroll=false
				this.dialog = false
			}
		},
		onLoad(options) {
			this.id = options.id
		}
	}
</script>

<style lang="scss" scoped>
	@import '../../../static/style/mixin.scss';

	.goodsDetails {
		@include bg2;
		min-height: 100vh;
		padding-bottom: 100upx;

		.goodsImg {
			width: 750upx;
			height: 40vh;
		}

		.price {
			background-color: #fff;
			width: 750upx;
			padding: 0 15upx;
			box-sizing: border-box;
			height: 80upx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			margin: 0;

			.originalCost {
				display: flex;
				border: 1px solid #000;
				width: 300upx;
				font-size: 25upx;

				.box {
					width: 150upx;
					height: 50upx;
					@include cc;
				}

				.t {
					background-color: #000;
					color: #fff;
				}

				.del {
					text-decoration: line-through;
				}
			}

			.preferentialPrice {
				color: red;
			}
		}

		.goodsNum {
			width: 720upx;
			height: 50upx;
			padding: 15upx 0;
			border-radius: 10upx;
			background-color: #fff;
			display: flex;
			justify-content: space-between;
			margin: 15upx auto;

			.numBox {
				display: flex;
				align-items: center;

				.minus,
				.add {
					width: 50upx;
					height: 50upx;
					background-color: #8c8c8c;
					border-radius: 10upx;
					@include cc;
					color: #fff;
				}

				.show {
					margin: 0 30upx;
				}
			}
		}

		.goodsInfo {
			width: 720upx;
			margin: 20upx auto;
			box-sizing: border-box;
			padding: 20upx;
			background-color: #fff;
			border-radius: 10upx;

			.title {
				font-size: 40upx;
				padding-bottom: 20upx;
				border-bottom: 1upx solid #00000030;
			}

			.desc {
				margin-top: 15upx;
				line-height: 50upx;
			}
		}

		.btnArea {
			position: fixed;
			bottom: 0;
			left: 0;
			width: 750upx;
			padding: 0 15upx;
			box-sizing: border-box;
			height: 100upx;
			background-color: #fff;
			display: flex;
			align-items: center;
			justify-content: space-between;

			.icon {
				width: 50upx;
				height: 50upx;
				margin-left: 50upx;
			}

			.btn {
				width: 550upx;
				height: 70upx;
				border-radius: 10upx;
				background-color: red;
				@include cc;
				color: #fff;
			}
		}

		.dialog {
			width: 750upx;
			height: 120vh;
			background-color: #00000050;
			position: fixed;
			top: 0;
			left: 0;
			@include cc;
			transform: translateY(-200upx);
			z-index: 5;

			.d_main {
				width: 600upx;
				border-radius: 10upx;
				background-color: #fff;
				box-shadow: 0 0 10px #00000090;

				.title {
					@include cc;
					padding-top: 30upx
				}

				.content {
					height: auto;
					@include vcc;

					.inputBox {
						width: 80%;
						height: 80upx;
						display: flex;
						align-items: center;
						background-color: #d4d4d4;
						padding: 10upx 20upx;
						border-radius: 10upx;
						margin-top: 20upx;

						.f_name {
							width: 150upx;
							text-align: left;
							margin-right: 15upx;
						}

					}

					.ta {
						display: block;
						height: auto;

						.f_name {
							margin: 0;
							text-align: left;
						}

						.textArea {
							height: 200upx;
						}
					}

					margin: 30upx 0;
				}

				.btnBox {
					display: flex;

					.btn {
						width: 50%;
						height: 80upx;
						@include cc;
					}

					.bgc {
						background-color: #00ffff30;
						border-radius: 10upx;
					}
				}
			}
		}
	}
</style>
